<template>
    <div class="jg-login">
        <div class="jg-login-content">
            <Form ref="formValidate" :model="params" :rules="ruleValidate">
                <FormItem>
                    <Input prefix="ios-contact-outline" size="large" v-model="params.account" placeholder="请输入用户名"></Input>
                </FormItem>
                <FormItem prop="password">
                    <Input prefix="ios-lock-outline" size="large" v-model="params.password" password type="password" placeholder="请输入密码"></Input>
                </FormItem>
                <FormItem prop="projectId">
                    <Select prefix="ios-settings-outline" size="large" v-model="params.projectId" placeholder="请选择项目">
                        <Option :value="item.id" :key="item.id" v-for="item in getprojectList">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Checkbox v-model="params.autoLogin" size="large">记住密码</Checkbox>
                </FormItem>
                <FormItem>
                    <Button type="primary" long :loading="params.submitloading" @click="handleSubmit('formValidate')">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
    import util from '@/libs/util';
    import { mapGetters } from 'vuex';
    export default {
        data () {
            return {
                params: { account: '', password: '', projectId: '', submitloading: false, autoLogin: true },
                projectList: [],
                ruleValidate: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    projectId: [
                        { required: true, message: '请选择项目', trigger: 'change', type: 'number' }
                    ]
                }
            };
        },
        computed: {
            ...mapGetters('websocket/websocketfun', ['getprojectList'])

        },
        beforeMount () {
            // this.$websocket.createWebSocket()
            let msg = {
                'msgType': 'projectList',
                'checkType': 2
            }
            this.$websocket.sendSock(msg)
            if (util.storage.get('loginInfo')) {
                let params = util.storage.get('loginInfo');
                this.params.account = params.account;
                this.params.password = params.password;
                this.params.projectId = params.projectId;
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.params.submitloading = true
                        let params = { account: this.params.account, password: this.params.password, projectId: this.params.projectId }
                        if (this.params.autoLogin) util.storage.set('loginInfo', params)
                        else {
                            if (util.storage.get('loginInfo')) util.storage.remove('loginInfo')
                        }
                        let msg = {
                            'msgType': 'screenAuth',
                            'checkType': 2,
                            'content': {
                                'projectId': params.projectId,
                                'account': params.account,
                                'password': params.password,
                                'token': ''
                            }
                        }
                        this.$websocket.sendSock(msg)
                        setTimeout(() => {
                            this.params.submitloading = false
                        }, 1000)
                    }
                })
            }
        }
    };
</script>
<style lang="less">
.jg-login{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    &-content{
        width: 400px;
        &-logo{
            width: 400px;
            object-fit: contain;
        }
        &-title{
            text-align: center;
        }
    }
}
.tuichu{
    padding: 12px;
    &:hover{
        background: #ed4014
    }
}
</style>
